<template>
  <van-row justify="center" class="mb-10 white-bg h-40">
    <van-col span="12" class="flex-center"><van-icon name="friends-o" /> 累计人数: {{ cumulativeNumber }} 人</van-col>
    <van-col span="12" class="flex-center"><van-icon name="balance-o" /> 累计奖励: {{ cumulativeAmount }} 元</van-col>
  </van-row>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell
        v-for="(item, index) in list"
        :key="index"
        center
        :title="item.receiveUserName"
        :label="item.createTime"
      >
        <template #icon>
          <van-image class="img" width="50" height="50" :src="item.receiveUserAvatar" />
        </template>
      </van-cell>
    </van-list>
  </van-pull-refresh>
</template>
<script>
import { reactive, toRefs, onMounted } from 'vue';
import { List, PullRefresh, Tab, Tabs, Cell, Icon, Row, Col, Image as VanImage } from 'vant';
import { myInviteCount, inviteList } from '@/api/activity';
export default {
  name: 'InviteList',
  components: {
    [Col.name]: Col,
    [Row.name]: Row,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [List.name]: List,
    [VanImage.name]: VanImage,
    [PullRefresh.name]: PullRefresh,
  },
  props: {
    activityId: String,
  },
  setup(props, context) {
    const state = reactive({
      cumulativeAmount: 0,
      cumulativeNumber: 0,
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
    });
    const searchObj = reactive({
      activityId: props.activityId,
      pageNum: 1,
      pageSize: 10,
    });
    const onLoad = async () => {
      if (state.refreshing) {
        // 下拉刷新
        state.list = [];
        searchObj.pageNum = 1;
        state.refreshing = false;
      } else if (state.list.length > 0) {
        //上拉加载更多
        searchObj.pageNum++;
      }
      const res = await inviteList(searchObj);
      state.loading = false;
      if (res.code === 200) {
        res.total = Number(res.total);
        res.pageNum = Number(res.pageNum);
        res.pageSize = Number(res.pageSize);
        if (!state.list.length) {
          state.list = res.rows;
        } else {
          state.list = state.list.concat(res.rows);
        }
        if (res.total >= state.list.length) {
          state.finished = true;
        }
      }
    };
    const onRefresh = async () => {
      state.finished = false;
      state.loading = true;
      onLoad();
    };

    const getMyInviteCount = async () => {
      const res = await myInviteCount(props.activityId);
      if (res.code === 200) {
        state.cumulativeAmount = res.data.cumulativeAmount;
        state.cumulativeNumber = res.data.cumulativeNumber;
      }
    };
    onMounted(() => {
      getMyInviteCount();
      onRefresh();
    });

    return {
      ...toRefs(state),
      onLoad,
      onRefresh,
      getMyInviteCount,
    };
  },
};
</script>
<style scoped>
.img {
  margin-right: 15px;
}
</style>
